<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>玉米物流信息管理</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../font-awesome/css/font-awesome.css" rel="stylesheet">

    <!-- Toastr style -->
    <link href="../css/plugins/toastr/toastr.min.css" rel="stylesheet">

    <!-- sweet alert -->
    <link href="../css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <!-- Gritter -->

    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <style>

        #addStaff {
            color: rgb(210, 210, 210);
            text-align: center;
        }

        #addStaff i {

            font-size: 156px;
        }

    </style>

</head>
<!-- 网页原名contacts.html table_data_tables.html -->
<body style="background: #fff">
<div id="wrapper">

    <!-- head start -->
    <div class="row wrapper border-bottom white-bg">
        <div class="col-lg-9">
            <h2>仓库详情</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="../index.html">首页</a>
                </li>
                <li>
                    仓库管理
                </li>
                <li class="active">
                    <strong>仓库详情</strong>
                </li>
            </ol>
        </div>
    </div>
    <!-- head end -->

    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-md-4">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h3>张三</h3>
                    </div>
                    <div>
                        <div class="ibox-content no-padding border-left-right">
                            <img alt="image" class="img-responsive" src="../img/profile_big.jpg">
                        </div>
                        <div class="ibox-content profile-content">
                            <p>职位：<strong>库管</strong></p>
                            <p><!-- <i class="fa fa-phone" aria-hidden="true"></i> --> 联系方式：<strong>123</strong>
                            </p>
                            <p>入职时间：<strong>2017-01-01</strong></p>
                            <p class="row">
                            <p class="col-md-6 col-sm-6">
                                每月工资：<input class="form-control" id="salary" style="width: 65%;display: inline-block;"
                                            disabled type="text" value="123">
                            </p>
                            <p class="col-md-6">
                                <button id="updateBtn" name="salary" class="btn btn-warning">修改员工工资</button>
                            </p>
                            </p>

                            <div class="user-button">
                                <div class="row">
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-primary btn-sm btn-block">
                                            <i class="fa fa-male" aria-hidden="true"></i>
                                            修改员工信息
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-default btn-sm btn-block"><i
                                                class="fa fa-coffee"></i> 开除员工
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 员工财务情况表 -->
            <div class="col-md-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h3>员工财务情况表</h3>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="#">Config option 1</a>
                                </li>
                                <li><a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
                         aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel">
                                        请输入新事件信息
                                    </h4>
                                </div>
                                <form id="form_data">
                                    <div class="modal-body row">
                                        <p class="col-md-3 col-xs-4">事件缘由</p>
                                        <p class="col-md-9 col-xs-8"><input style="width: 80%" type="text"
                                                                            name="result"/></p>
                                        <p class="col-md-3 col-xs-3">
                                            <label for="jiangli">奖励</label>
                                            <input id="jiangli" value="奖励" name="jiangcheng" type="radio">
                                        </p>
                                        <p class="col-md-9 col-xs-9">
                                            <label for="chengfa">惩罚</label>
                                            <input id="chengfa" value="惩罚" name="jiangcheng" type="radio">
                                        </p>
                                        <!--<p class="col-md-12"></p>-->
                                        <p class="col-md-3 col-xs-4">金额</p>
                                        <p class="col-md-9 col-xs-8"><input id="judgeInp" type="text"
                                                                            onblur="judgeAdd()" style="width: 80%"
                                                                            name="sum"/></p>

                                        <input type="hidden" id="act" value="add" name="act"/>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                        </button>
                                        <button type="button" onclick="add_info()" data-dismiss="modal"
                                                class="btn btn-primary">
                                            提交更改
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content row">
                        <div class="col-md-2">
                            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                                添加新事件
                            </button>
                        </div>
                        <div id="alertBoolean" class="col-md-2 col-md-offset-8">
                            <a href="javascript:void(0);" onclick="createNewTr()" class="btn btn-primary">结算所有工资</a>
                        </div>
                        <table class="table table-striped table-bordered table-hover " id="editable">
                            <thead>
                            <tr>
                                <th>事由</th>
                                <th>奖惩措施</th>
                                <th>金额</th>
                                <th>时间</th>
                                <th>工资余额（元）</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="newTr">
                                <td>事件1</td>
                                <td>奖励</td>
                                <td>500</td>
                                <td>2017</td>
                                <td>0</td>
                            </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <th>事由</th>
                                <th>奖惩措施</th>
                                <th>金额</th>
                                <th>时间</th>
                                <th>工资余额（元）</th>
                            </tr>
                            </tfoot>
                        </table>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>


<!-- Mainly scripts -->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="../js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="../js/inspinia.js"></script>

<!-- sweet alert -->
<script src="../js/plugins/sweetalert/sweetalert.min.js"></script>
<script>

    //添加事件
    function add_info() {
        var tbody = document.getElementsByTagName("tbody")[0];
        var result = document.getElementsByName("result")[0];               //事由
        var jiangcheng = document.getElementsByName("jiangcheng");
        var jc;                                                             //奖惩
        var sum = document.getElementsByName("sum")[0];                     //金额
        for (var i = 0; i < jiangcheng.length; i++) {
            if (jiangcheng[i].checked) {
                jc = jiangcheng[i].value;
            }
        }

        //添加事件的内容
//        console.log(result.value + "--" + jc + "--" + sum.value);
        var newTr = document.createElement("tr");
        tbody.appendChild(newTr);
        var tds = {};
        for (var i = 0; i < 5; i++) {
            tds[i] = document.createElement("td");
        }
        //获取时间
        var myDate = new Date();
        var myYear = myDate.getFullYear();    //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
        var myDay = myDate.getDate();        //获取当前日(1-31)
        myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
        myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
        var myHour = myDate.getHours();       //获取当前小时数(0-23)
        var myMin = myDate.getMinutes();     //获取当前分钟数(0-59)
        var mySec = myDate.getSeconds();     //获取当前秒数(0-59)
        myDate.getMilliseconds();    //获取当前毫秒数(0-999)
        myDate.toLocaleDateString();     //获取当前日期
        var mytime = myDate.toLocaleTimeString();     //获取当前时间
        myDate.toLocaleString();        //获取日期与时间

        tds[0].innerHTML = result.value;
        tds[1].innerHTML = jc;
        tds[2].innerHTML = sum.value;
        tds[3].innerHTML = myYear + ":" + myMonth + ":" + myDay + "&nbsp;" + myHour + ":" + myMin + ":" + mySec;

        for (var i = 0; i < 4; i++) {
            newTr.appendChild(tds[i]);
        }

        result.value = sum.value = "";
        for (var i = 0; i < jiangcheng.length; i++) {
            jiangcheng[i].checked = false;
        }
    }

    //添加事件的判断
    function judgeAdd() {
        var judgeInp = document.getElementById("judgeInp");
        if (judgeInp.value == 0 || judgeInp.value == "" || judgeInp.value == undefined || isNaN(judgeInp.value) == true) {

            swal("您的输入有误，请重新输入", "", "error");
        }
    }
    //修改工资
    var updateBtn = document.getElementById("updateBtn");
    var salaryInp = document.getElementById("salary");
    var updateBtnTemp = 0;              //0为未点击
    updateBtn.onclick = function () {
        if (updateBtnTemp == 0) {
            updateBtnTemp = 1;
            salaryInp.disabled = false;
            salaryInp.value = "";
            salaryInp.placeholder = "请输入工资";
            updateBtn.innerHTML = "点击确认";
        } else if (updateBtnTemp == 1) {
            if (salaryInp.value != 0 && salaryInp.value != "" && salaryInp.value != undefined && isNaN(salaryInp.value) == false) {
                //这里需要ajax传给后台更改数据
                swal("工资修改成功", "请您通知员工", "success");
            } else {
                salaryInp.value = "";
                swal("您的输入有误，请重新输入", "", "error");
            }
        }
    }

    function createNewTr() {
        swal({
                    title: "你确定要结算工资吗？",
                    text: "结算工资后，员工工资将清空，如果是员工预支，请使用“添加新事件”",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是的，我要给员工结算所有工资",
                    cancelButtonText: "不了，我需要再算一下",
                    closeOnConfirm: false,
                    closeOnCancel: false,
                    allowOutsideClick: true
                },
                function (isConfirm) {
                    if (isConfirm) {
                        swal("数据已更改，请别忘记发工资", "我们将以短信形式提醒员工与您交接", "success");
                    } else {
                        swal("数据未改变", "您的操作讲退回)", "error");
                    }
                });
    }
</script>

</body>

</html>
